<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/views/modules/include/taglib.jsp"%>
<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<title>订单详情</title>
		<%@ include file="/WEB-INF/views/modules/include/meta.jsp"%>
		<script src="${ctxStatic}/modules/bootstrap/js/bootstrap-transition.js"></script>
		<script src="${ctxStatic}/modules/bootstrap/js/bootstrap-modal.js"></script>
	</head>
	<body>
	<!--导航条-->
	<%@ include file="/WEB-INF/views/modules/include/top.jsp"%>

	<!-- 内容 -->
	<form id="listForm" action="${ctxShop}/shoping/orderSuccess/save" method="post">
		<input type="hidden" name="cars" id="cars" />
		<input type="hidden" name="payType" value="2"/>
		<input type="hidden" id="totalAmount" name="totalAmount" value="0"/>
		<input type="hidden" id="totalCount" name="totalCount" value="0"/>
		<input type="hidden" name="classifyId" value="${classifyId }"/>
		<input type="hidden" name="merchant.id" value="${merchant.id }"/>
		<!-- 收货地址 -->
		<input type="hidden" id="id2" />
		<input type="hidden" id="name2" name="name" />
		<input type="hidden" id="phone2" name="phone" />
		<input type="hidden" id="province2" name="province" />
		<input type="hidden" id="city2" name="city" />
		<input type="hidden" id="country2" name="country" />
		<input type="hidden" id="address2" name="address" />
		<input type="hidden" id="defaultFlag2" name="defaultFlag" />
		
		<input type="hidden" id="mode" name="mode" value="${mode}" />
		<input type="hidden" id="userId" name="userId" value="" />
		
		<div class="container text-center" style="margin-top: 40px;">
			<%@ include file="/WEB-INF/views/modules/include/left.jsp"%>
			
			<div class="col-md-6" style="left: 25%;">
				<%@ include file="/WEB-INF/views/modules/include/navicat.jsp"%>
				
                <div class="row" style="padding:0px 20px; padding-top: 20px;">
                    <div class="col-md-12">
						<!--收货人-->
				        <div class="panel panel-default">
				            <div class="panel-heading text-left">
				                <span class="glyphicon glyphicon-user" aria-hidden="true"></span>    收获地址
				            </div>
				            <div class="panel-body">
				                <div class="row" data-toggle="modal" data-target="#memberDiv" id="addressDiv">
				                    <div class="col-md-11 text-left" id="memberInfo">
				                    </div>
				                    <div class="col-md-1 pc_right">
				                        <!--大图标-->
				                        <label class="pc_right pc_icon">
				                        	<img src="${ctxStatic}/modules/bootstrap/img/icon_7.png" title="收货地址" width="15" height="22.5">
				                        </label>
				                    </div>
				                </div>
				            </div>
				        </div>
					</div>
                </div>
                
                <div class="row" style="padding:0px 20px; border: 1px #f9f9f9; solid;">
                    <div class="col-md-12">
						<!--支付方式-->
			            <div class="panel panel-default">
			                <div class="panel-heading text-left">
			                    <span class="glyphicon glyphicon-erase" aria-hidden="true"></span>    支付方式
			                </div>
			                <div class="panel-body pay-choice" style="padding: 0px;">
			                	<div class="row" style="padding-top: 8px; padding-bottom: 8px; border-bottom-width: 1px; border-bottom-style: dashed; border-bottom-color: rgb(207, 207, 207); background: rgb(241, 241, 241);">
			                        <div class="col-md-10 col-sm-10 col-xs-10 text-left" onclick="choicePayType(1,2)" style="padding-left: 10px; height: 30px; line-height: 30px; vertical-align: middle;">
			                        	<div class="pay-icon"><img src="${ctxFront }/images/shop/pay_2.png" alt="支付宝帐号支付"></div>
			                            	支付宝支付
			                        </div>
			                        <div class="col-md-2 col-sm-2 col-xs-2 pc_right">
										<label class="pc_icon">
											<img src="${ctxStatic}/modules/bootstrap/img/radio-icon1.png" id="payType1" alt="" onclick="choicePayType(1,2)" width="20" height="20" style="margin-top: 5px;">
										</label>
			                        </div>
			                    </div>
			                    <div class="row" style="padding-top: 8px; padding-bottom: 8px; border-bottom-width: 1px; border-bottom-style: dashed; border-bottom-color: rgb(207, 207, 207);">
			                        <div class="col-md-10 col-sm-10 col-xs-10 text-left" onclick="choicePayType(2,3)" style="padding-left: 10px; height: 30px; line-height: 30px; vertical-align: middle;">
			                        	<div class="pay-icon"><img src="${ctxFront }/images/shop/pay_3.png" alt="储蓄卡便捷支付"></div>
			                            	银联支付
			                        </div>
			                        <div class="col-md-2 col-sm-2 col-xs-2 pc_right">
										<label class="pc_icon">
											<img src="${ctxStatic}/modules/bootstrap/img/radio-icon2.png" id="payType2" alt="" onclick="choicePayType(2,3)" width="20" height="20" style="margin-top: 5px;">
										</label>
			                        </div>
			                    </div>
			                    <div class="row" style="padding-top: 8px; padding-bottom: 8px;">
			                        <div class="col-md-10 col-sm-10 col-xs-10 text-left" onclick="choicePayType(3,1)" style="padding-left: 10px; height: 30px; line-height: 30px; vertical-align: middle;">
			                        	<div class="pay-icon"><img src="${ctxFront }/images/shop/pay_1.png" alt="货到付款"></div>
			                            	货到付款
			                        </div>
			                        <div class="col-md-2 col-sm-2 col-xs-2 pc_right">
										<label class="pc_icon">
											<img src="${ctxStatic}/modules/bootstrap/img/radio-icon2.png" id="payType3" alt="" onclick="choicePayType(3,1)" width="20" height="20" style="margin-top: 5px;">
										</label>
			                        </div>
			                    </div>
			                 </div>
			            </div>
					</div>
                </div>
                
                <div class="row" style="padding:0px 20px; border: 1px #f9f9f9; solid;">
                    <div class="col-md-12">
						<!--收获时间-->
			            <div class="panel panel-default">
			                <div class="panel-heading text-left">
			                    <span class="glyphicon glyphicon-time" aria-hidden="true"></span>    收货时间
			                    <input type="hidden" id="timeSlot" name="timeSlot.id" value="" />
			                </div>
			                <div class="panel-body">
			                    <div class="row" onclick="openTime(this)">
			                        <div class="col-md-11 text-left" id="timeSlotText">
			                           	请选择收货时间
			                        </div>
			                        <div class="col-md-1 pc_right">
			                            <!--大图标-->
			                            <%--<span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span>--%>
			                            <label class="pc_right pc_icon">
			                            	<img src="${ctxStatic}/modules/bootstrap/img/drop.png" width="22.5" height="15">
			                            </label>
			                        </div>
			                    </div>
				            	<div style="display: none;" id="chooseTimeDiv"> 
				                <c:forEach items="${receiptTime.choiceReceiptTimes}" var="choiceTime">
				                    <div class="row pc_cursor" id="${choiceTime[0]}" onclick="choiceTime(this)">
				                        <div class="col-md-3 text-left" style="padding-top: 10px;">
				                           	${choiceTime[1]}
				                        </div>
				                        <div class="col-md-4">
				                        </div>
				                    </div>
				                 </c:forEach>
				            	</div>
			                </div>
			            </div>
					</div>
                </div>
                
                <div class="row" style="padding:0px 20px; border: 1px #f9f9f9; solid; padding-bottom: 50px;">
                    <div class="col-md-12">
						<!--备注信息-->
			            <div class="panel panel-default">
			                <div class="panel-heading text-left">
			                    <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>    备注信息
			                </div>
			                <div class="panel-body text-left">
			                   <textarea class="form-control" rows="2" cols="10" id="remarks" name="remarks" placeholder="请输入备注信息"></textarea>
			                </div>
			            </div>
					</div>
                </div>
			</div>
			
			<%@ include file="/WEB-INF/views/modules/include/right.jsp"%>
   </div>
</form>
        
        
	<!-- 底部 -->
	<nav class="container navbar navbar-default navbar-fixed-bottom pc_bottom_width" style="width: 50%;">
		<div class="container-fluid text-center">
               <div class="row">
                   <div class="col-md-3 pc_color">
                      	<p>总金额：<small class="pc_amount" id="strongAmount">￥${amount}</small></p>
                      	<span id="car_num" style="display: none;"></span>
                   </div>
                   <div class="col-md-6 pc_color" id="totalAmountDesc" style="display: none;">
                       <p style="font-size: 11px;">（含配送费&nbsp;<span style="font-size: 11px; color: #000;">￥<font id="freightDesc">${fee<=0?0.00:fee}</font></span>）</p>
                   </div>
                   <div class="col-md-2 pc_right" style="padding-top: 8px;">
                   		<button type="button" class="btn btn-danger" onclick="submitOrder();">提交订单</button>
                   </div>
               </div>
           </div>
	</nav>
	
	
    	<!--弹出添加收货人-->
        <div class="modal fade" id="memberDiv" tabindex="-2" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">收货地址填写</h4>
                    </div>
                    <div class="modal-body">
                        <form class="form-horizontal">
                        	<div class="form-group">
                                <label for="inputEmail3" class="col-sm-2 control-label">姓名：</label>
                                <div class="col-sm-10">
                                    <input type="email" class="form-control" name="inputEmail3" placeholder="请输入姓名" id="name">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="inputEmail3" class="col-sm-2 control-label">手机号码：</label>
                                <div class="col-sm-10">
                                    <input type="email" class="form-control" name="inputEmail3" placeholder="请输入手机号码" id="phone">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="inputEmail3" class="col-sm-2 control-label">所在区县：</label>
                                <div class="col-sm-10">
                                	<input type="hidden" class="form-control" name="inputEmail3" placeholder="所在省" id="province">
                                	<input type="hidden" class="form-control" name="inputEmail3" placeholder="所在市" id="city" value="上海市">
                                    <%--<input type="text" class="form-control" name="inputEmail3" placeholder="所在区" id="country">
                                    --%>
                                    <select class="form-control" name="qx" placeholder="请选择所在区" id="country">
                                    	<option value="浦东新区">浦东新区</option>
                                    	<option value="徐汇区">徐汇区</option>
                                    	<option value="长宁区">长宁区</option>
                                    	<option value="普陀区">普陀区</option>
                                    	<option value="闸北区">闸北区</option>
                                    	<option value="虹口区">虹口区</option>
                                    	<option value="杨浦区">杨浦区</option>
                                    	<option value="黄浦区">黄浦区</option>
                                    	<option value="卢湾区">卢湾区</option>
                                    	<option value="静安区">静安区</option>
                                    	<option value="宝山区">宝山区</option>
                                    	<option value="闵行区">闵行区</option>
                                    	<option value="嘉定区">嘉定区</option>
                                    	<option value="金山区">金山区</option>
                                    	<option value="松江区">松江区</option>
                                    	<option value="青浦区">青浦区</option>
                                    	<option value="南汇区">南汇区</option>
                                    	<option value="奉贤区">奉贤区</option>
                                    	<option value="崇明县">崇明县</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="inputPassword3" class="col-sm-2 control-label">收货地址：</label>
                                <div class="col-sm-10">
                                    <textarea class="form-control" rows="3" placeholder="请输入收货地址" id="address"></textarea>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary" onclick="addMembers();">保存</button>
                        <button type="button" class="btn btn-primary" data-dismiss="modal" aria-label="Close" id="closeMember">关闭</button>
                    </div>
                </div>
            </div>
        </div>

</body>
<script>
var lowFee = ${lowFee};
var fee = ${fee};
/**初始化收货人地址列表*/
initMember();

function choiceTime(obj){
	var _this = $(obj);
	$('#timeSlot').val(_this.attr("id"));
	$('#chooseTimeDiv').css("display","none");
	$('#timeSlotText').text(_this.find(".text-left").html());
}

function addMembers(){
	var id = $("#id2").val();
	var phone = $("#phone").val();
	var country = $("#country").val();
	var address = $("#address").val();
	
	var name = $("#name").val();
	var province = $("#province").val();
	var city = $("#city").val();
	var postcode="1";
	
	if(name=="")
       {
          alert('请输入收货人姓名！');
          $("#name").select();
          return;
       }
	
	if(phone=="")
       {
          alert('请输入手机号码！');
          $("#phone").select();
          return;
       }    
       if(phone.length!=11)
       {
           alert('请输入有效的手机号码！');
           $("#phone").select();
          return;
       }
       
       //var myreg = /^(((13[0-9]{1})|159|153)+\d{8})$/;
       /*if(!myreg.test(phone))
       {
           alert('请输入有效的手机号码！');
           $("#phone").select();
          	return;
       }*/
       
       if(address=="")
       {
          alert('请输入收货地址！');
          $("#address").select();
          return;
       }
	
	addMemberToCookie(id,name,phone,postcode,province,city,country,address);
	
	$("#closeMember").click();
	
	initMember();
}
	
function choicePayType(num, val){
	if(val==3){ //如果是银联，则提示暂不支持PC支付
		alert("暂不支持银联支付！");
		$("img[id='payType"+1+"']").attr("src", "${ctxStatic }/modules/bootstrap/img/radio-icon1.png");
		$(".pay-choice .row:eq("+(1-1)+")").css("background", "rgb(241, 241, 241)");
		$("input[name='payType']").val(2);
		return;
	}
	for(var i=1; i<=4; i++){
		if(i==num){
			$("img[id='payType"+num+"']").attr("src", "${ctxStatic }/modules/bootstrap/img/radio-icon1.png");
			$(".pay-choice .row:eq("+(num-1)+")").css("background", "rgb(241, 241, 241)");
			$("input[name='payType']").val(val);
		}else{
			$("img[id='payType"+i+"']").attr("src", "${ctxStatic }/modules/bootstrap/img/radio-icon2.png");
			$(".pay-choice .row:eq("+(i-1)+")").css("background", "rgb(255, 255, 255)");
		}
	}
}

function submitOrder(){
	if(parseFloat($("#totalAmount").val())==0){
		alert("请购买商品后重试.");
		return;
	}
	 if($("#memberInfo").text()=="请填写收货人信息!"){
		alert("请填写收货人信息.");
		return;
	}
	
	if($("#timeSlot").val()==""){
		alert("请选择收货时间.");
		return;
	}
	
	var cookieService = new  MallCookieService();
	var carsJson = cookieService.getCarsJson();
	if(carsJson != null && carsJson.length > 0){
		$("#cars").val(carsJson);
	}else{
		alert("购物车中无商品.");
		return;
	}
	
	$("#listForm").submit();
}
	
function openTime(t){
	if($('#chooseTimeDiv').attr('style')=='display: none;'){
		$('#chooseTimeDiv').attr('style','display: block;');
	}else{
		$('#chooseTimeDiv').attr('style','display: none;');
	}
}
</script>
</html>
